<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>

<body>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>


  <style>
    html {
      background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0, 0, 0, 0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0, 0, 0, 0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px);
      /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      background: #fff;
      position: absolute;
      top: 50%;
      right: 50%;
      box-shadow:
        0 0 0 .1px #fff,
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(0, 0, 0, 0.4),
        2px 5px 1px rgba(0, 0, 0, .5);
      transform-origin: 100% 50%;
      transform: rotate(90deg);

      transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68);
    }

    .clock-face:after {
      width: 1em;
      height: 1em;
      left: 50%;
      top: 50%;
      position: absolute;
      display: block;
      content: '';
      background-color: #a8c5d1;
      border-radius: 50%;
      box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(0, 0, 0, 0.2);
      transform: translate(-50%, -50%);
    }

    .hour-hand {
      width: 40%;
      height: 10px;
      margin-top: -5px;
      border-bottom-left-radius: .5em;
      border-top-left-radius: .5em;
      transition: all 3s;
    }

    .min-hand {
      width: 45%;
      height: 5px;
      margin-top: -2.5px;
      transition: all .1s cubic-bezier(0.9, 0.54, 0.26, 1.68);
    }

    .second-hand {
      height: 2px;
      margin-top: -1px;
      border-bottom-left-radius: 100%;
      border-top-left-radius: 100%;
      transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68);
      background-color: red;
    }
  </style>

  <script>
    const secondHand = document.querySelector(".second-hand");
    const minHand = document.querySelector(".min-hand");
    const hourHand = document.querySelector(".hour-hand");

    function setTime() {
      const now = new Date();

      const second = now.getSeconds();
      const secondDegree = second * (360 / 60) + 90;
      secondHand.style.transform = `rotate(${secondDegree}deg)`;

      const min = now.getMinutes();
      const minDegree = min * (360 / 60) + (second / 60) * (360 / 60) + 90;
      minHand.style.transform = `rotate(${minDegree}deg)`;

      const hour = now.getHours();
      const hourDegree = hour * (360 / 12) + (min / 60) * (360 / 12) + 90;
      hourHand.style.transform = `rotate(${hourDegree}deg)`;

    }

    setInterval(setTime, 1000);//1000ms

  </script>
</body>

</html>